<template>
    <div class="user-details-box">
        <div class="user-details-head">
            <div class="head-left">
                <img class="avatar" src="@/assets/images/girls-2.webp" />
            </div>
            <div class="head-left">导航</div>
            <div class="head-right">
                时节/2024/12/22/天气
            </div>
        </div>
        <!-- <div class="line"></div> -->
        <div class="user-details-body">
            <img src="@/assets/images/初期设计稿.jpg" class="design"/>
            <el-button @click="logout">登出</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/loginStore';
import { ElMessage } from 'element-plus';
import {ref} from 'vue'

const loginStore = useLoginStore()

const logout = ()=>{
    loginStore.logout()
}
</script>

<style scoped>
.avatar{
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.design{
    width: 600px;
    height: 450px;
}
.user-details-box{
    display: flex;
    flex-direction: column;
}
.user-details-head{
    display: flex;
    align-items: baseline;
    
}
.head-left{
    flex-grow: 2;
}
.head-right{
    flex-basis: 0;
    flex-grow: 1;
}
</style>